<template>
  <div>
    <div class="header">
      <div class="intro">
        <img src="./images/123.png">
        <div class="intro-name">{{userName}}</div>
      </div>
      <div class="set">
        <img src="./images/设置.png"  @click="toSet" >
      </div>
    </div>
    <div class="userInfo"> 
      <div class="userLevel">
        <span style="color:white;background-color:royalblue;border-radius:10px">普通用户</span>
        <span>会员等级</span>
      </div>
      <div class="countDays">
        <span style="font-size:18px">10</span>
        <span>记账总天数</span>
      </div>
      <div class="countDays">
        <span style="font-size:18px">12</span>
        <span>记账总笔数</span>
      </div>
    </div>
    <div class="billInfo">
      <div class="billInfo-title">
        <span style="font-size:22px;margin-left:4vw">
          账单
        </span>
      </div>
      <div class="billInfo-content">
        <span class="month">
          <span style="line-height:8.4vh">{{month}}</span>月
        </span>
        <span class="info">
          <div>收入</div>
          <div>{{monthlyBillInfo.get.toFixed(2)}}</div>
        </span>
        <span class="info">
          <div>支出</div>
          <div>{{monthlyBillInfo.pay.toFixed(2)}}</div>
        </span>
        <span class="info">
          <div>结余</div>
          <div>{{total.toFixed(2)}}</div>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import { getBill } from '@/api';
const dd = new Date();
export default {
    name:'UserInfo',
    data(){
      return{
        year:dd.getFullYear(),
        month:dd.getMonth()+1,
        monthlyBillInfo:{
          get:0,
          pay:0,
        },
        userName:sessionStorage.getItem('username')?sessionStorage.getItem('username'):'未登录',
      }
    },
    computed:{
      total(){
        return this.monthlyBillInfo.get-this.monthlyBillInfo.pay;
      }
    },

    methods:{
      toSet(){
        this.$router.push('/setUser');
      },    
    },

    async mounted(){
      const result = await getBill({year:this.year,month:this.month},sessionStorage.getItem('loginToken')?sessionStorage.getItem('loginToken'):'');
      if(!result.success){
        alert('数据加载失败');
      }else{
        console.log(result);
        this.monthlyBillInfo.get= result.result.month_get_money;
        this.monthlyBillInfo.pay= result.result.month_pay_money;
      }
    },
}
</script>

<style scoped>
  .header{
    position: relative;
    height: 30vh;
    width: 100%;
    background-color:royalblue;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }

  .header .intro{
    float: left;
    height: 100%;
    width: 40vw;
    margin-left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }

  .intro img{
    height: 60px;
    width: 60px;
    margin-top: 50px;
    border-radius: 30px;
  }

  .intro-name{
    margin-top: 5vh;
    color: white;
    font-size: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .set{
    float: right;
    height: 40px;
    width:40px;
    margin-top:2vh;
  }

  .set img{
    height: 40px;
    width: 40px;
  }

  .userInfo{
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    line-height: 8vh;
    height: 8vh;
    width: 90%;
    top: 27vh;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 20px;
  }

  .userLevel{
    display: flex;
    flex-direction: column;
    height: 60%;
    width: 33%;
    margin: auto 0;
    border-right: solid 1px rgba(0, 0, 0, 0.2);
    /* background-color: aqua; */

  }

  .userLevel span{
    height: 50%;
    width: 50%;
    line-height: 150%;
    margin-left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    text-align: center;
  }

  .countDays span{
    height: 50%;
    width: 100%;
    line-height: 150%;
    margin-left: 50%;
    transform: translateX(-50%);
    font-size: 12px;
    text-align: center;
  }


  .countDays{
    display: flex;
    flex-direction: column;
    height: 60%;
    width: 33%;
    margin: auto 0;
    /* background-color: black; */
  }

  .billInfo{
    position: absolute;
    height: 16vh;
    width: 90%;
    top: 40vh;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
    border-radius: 20px;
    overflow: hidden;
  }

  .billInfo-title{
    color: white;
    height:30%;
    background-color:royalblue;
    line-height: 4vh;
  }

  .billInfo-content{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    height: 70%;
    width: 100%;
    color: black;
    
  }

  .info{
    display: flex;
    flex-direction: column;
    width: 25%;
    height:100%;
    /* background-color: black; */
  }

  .info div{
    height: 50%;
    line-height: 50px;
    text-align: center;
  }

  .month{
    height: 50%;
    width: 25%;
    color: black;
    margin: auto;
    border-right: solid 1px rgba(0, 0, 0, 0.2);
    line-height: 50px;
    font-size: 24px;
    
  }

  .month span{
    display: flex;
    justify-content: center; 
    align-items: center; 
    font-size: 24px;
    color: black;
    height: 100%;
    width: 50%;
    line-height: 50px;
    text-align: center;
    float: left;
  }
</style>